<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<title></title>

<script type="text/javascript">
	$(function() {
		//表格
		$('#dg')
				.datagrid(
						{
							url : "${pageContext.request.contextPath}/findsalary",
							columns : [ [
									{
										field : 'e_id',
										title : '员工id',
										width : 100,
										hidden:true,
									},
									{
										field : 'e_number',
										title : '员工编号',
										width : 100
									},
									{
										field : 'e_name',
										title : '员工姓名',
										width : 100
									},
									{
										field : 'dept_name',
										title : '所属部门',
										width : 100
									},
									{
										field : 'sal_base',
										title : '基本工资',
										width : 100
									},
									{
										field : 'sal_overtime',
										title : '加班工资',
										width : 100
									},
									{
										field : 'sal_penalty',
										title : '惩罚金额',
										width : 100,
									},
									{
										field : 'sal_total',
										title : '总工资',
										width : 100,
									},
									{
										field : 'sal_date',
										title : '日期',
										width : 100
									},
									{
										field : 'details',
										title : '详情',
										width : 100,
										formatter : function(value, row, index) {
											return '<a href="#" onclick="searchDetails('
													+ index + ')">查看详情</a>';
										}
									} ] ],
							pagination : true,
							striped : true,
							singleSelect : true,
							toolbar : '#tb',
						});

		//配置下拉框1
		$('#box1').combobox({
			valueField : 'id',
			textField : 'text',
			data : [ {
				id : 1,
				text : "按月份查询",
			}, {
				id : 2,
				text : "按部门查询"
			}, {
				id : 3,
				text : "全部查询"
			} ],
			onSelect : function(rec) {
				if (rec.id == 1) {
					$("#searchbox2").hide();
					$("#date").attr("style", "display:inline;");
					$("#searchinput").searchbox("clear");
					$("#search").attr("style", "display:inline;");
				} else if (rec.id == 2) {
					$("#date").hide();
					$("#search").hide();
					$("#searchbox2").attr("style", "display:inline;");
					var url = '${pageContext.request.contextPath}/getdept';
					$('#box2').combobox('reload', url);
				} else {
					$("#searchbox2").hide();
					$("#date").hide();
					$("#search").hide();
					$("#dg").datagrid("load", {});
				}
			},
		});

		//配置下拉框2
		$('#box2').combobox({
			valueField : 'id',
			textField : 'text',
			width : 120,
			panelHeight : 100,
			onSelect : function(rec) {
				var deptname = rec.text;
				$("#dg").datagrid("load", {
					"deptname" : deptname,
				})
			},
		});

		//配置日历搜索框
		$('#datetime1').datebox({
			required : true,
			width : 200,

		});

		//查看详情窗口
		$('#win').window({
			width : 600,
			height : 400,
			modal : true,
			title : "详细信息",
		});
		//默认关闭
		$('#win').window("close");

		//缺勤表格
		$('#abdg').datagrid({
			url : '${pageContext.request.contextPath}/salGetabsent',
			columns : [ [ {
				field : 'e_number',
				title : '员工编号',
				width : 120
			}, {
				field : 'e_name',
				title : '员工姓名',
				width : 120
			}, {
				field : 'absent_starttime',
				title : '开始时间',
				width : 120
			}, {
				field : 'absent_endtime',
				title : '结束时间',
				width : 120,
			} ] ],
			pagination : true,
		});

		//加班表格
		$('#otdg').datagrid({
			url : '${pageContext.request.contextPath}/salGetovtm',
			columns : [ [ {
				field : 'e_number',
				title : '员工编号',
				width : 120
			}, {
				field : 'e_name',
				title : '员工姓名',
				width : 120
			}, {
				field : 'ot_starttime',
				title : '开始时间',
				width : 120
			}, {
				field : 'ot_endtime',
				title : '结束时间',
				width : 120,
			} ] ],
			pagination : true,
		});

		/*
		//配置查询按钮
		$('#searchbtn').linkbutton({    
		    iconCls: 'icon-search',
		    onClick:function(){
		    	var date = $("#datetime1").datebox("getText");
		    	$("#dg").datagrid("load",{
		    		"date" :date,
		    	});
		    }
		}); 
		 */

	});

	//搜索框
	function doSearch(value) {
		var date = $("#datetime1").datebox("getText");
		$("#dg").datagrid("load", {
			"value" : value,
			"date" : date,
		});
		$("#searchinput").searchbox("clear");
	}

	//点击查看详情触发
	function searchDetails(index) {
		$('#dg').datagrid('selectRow', index);
		var row = $('#dg').datagrid('getSelected');
		var e_id = row.e_id;
		var sal_date = row.sal_date;
		$("#abdg").datagrid("load", {
			"e_id" : e_id,
			"sal_date" : sal_date,
		});
		$("#otdg").datagrid("load", {
			"e_id" : e_id,
			"sal_date" : sal_date,
		});
		$("#win").window("open");
	}
</script>




</head>
<body>
	<!-- 工资表 -->
	<table id="dg" style="width: 902px;"></table>
	<!-- 工具栏 -->
	<div id="tb">
		<!-- 下拉框1 -->
		<div id="searchbox1">
			<input id="box1" value="请选择查询方式" editable="false">
		</div>
		<!-- 下拉框2 -->
		<div id="searchbox2" style="display: none">
			<input id="box2" value="请选择部门" editable="false">
		</div>
		<!-- 日历搜索框 -->
		<div id="date" style="display: none;">
			<input type="text" id="datetime1" editable="false">
			<!--  
			<a id="searchbtn">查询</a>  -->
		</div>
		<!-- 搜索框 -->
		<div id="search" style="display: none;">
			<input id="searchinput" class="easyui-searchbox"
				data-options="prompt:'请输入  员工编号/员工姓名',searcher:doSearch"
				style="width: 250px;">
		</div>
	</div>

	<!-- 查看详情窗口 -->
	<div id="win">
		<!-- 缺勤表格 -->
		<h4>缺勤详情</h4>
		<table id="abdg" style="width: 490px;"></table>
		<!-- 加班表格 -->
		<h4>加班详情</h4>
		<table id="otdg" style="width: 490px;"></table>
	</div>

</body>

<!-- 修改datebox源代码 -->
<script type="text/javascript">
	$(function() {
		$('#datetime1')
				.datebox(
						{
							onShowPanel : function() {// 显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层    
								span.trigger('click'); // 触发click事件弹出月份层    
								if (!tds)
									setTimeout(
											function() {// 延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔    
												tds = p
														.find('div.calendar-menu-month-inner td');
												tds
														.click(function(e) {
															e.stopPropagation(); // 禁止冒泡执行easyui给月份绑定的事件    
															var year = /\d{4}/
																	.exec(span
																			.html())[0]// 得到年份    
															month = parseInt($(
																	this).attr(
																	'abbr'), 10) + 1; // 月份    
															$('#datetime1')
																	.datebox(
																			'hidePanel')
																	// 隐藏日期对象    
																	.datebox(
																			'setValue',
																			year
																					+ '-'
																					+ month); // 设置日期的值    
														});
											}, 0);
							},
							parser : function(s) {// 配置parser，返回选择的日期    
								if (!s)
									return new Date();
								var arr = s.split('-');
								return new Date(parseInt(arr[0], 10), parseInt(
										arr[1], 10) - 1, 1);
							},
							buttons : [],
							formatter : function(d) {
								var month = d.getMonth();
								if (month < 10) {
									month = "0" + month;
								}
								if (d.getMonth() == 0) {
									return d.getFullYear() - 1 + '-' + 12;
								} else {
									return d.getFullYear() + '-' + month;
								}
							}// 配置formatter，只返回年月    
						});
		var p = $('#datetime1').datebox('panel'), // 日期选择对象    
		tds = false, // 日期选择对象中月份    
		span = p.find('span.calendar-text'); // 显示月份层的触发控件    

	});
</script>

</html>